<template>
    <view class="question">
			<view>
				<view class="question-item">
				            <view class="hi">
				                Hi~
				            </view>
				            <view class="kf">
				                专属客服小畅为您服务
				            </view>
				        </view>
				        <view class="dw">
				            <view class="asked">
				                常见问题
				            </view>
				<!--            <scroll-view :scroll-x="true">
				            		<view class="content">
				            			<view class="box">
				                           
				            				<view  v-for="(item, index)  in titleList" class="title" :class="{'title1':isChange==index}" :key="index" @click="titleTap(index)"><view class="texts">
				            				    {{item}}
				            				</view>
				                 
				                            </view>
				            			</view>
				            		</view>
				            	</scroll-view> -->
											<view class="asked-item">
												<uni-collapse>
													<uni-collapse-item titleBorder="none" v-for="(item,index) in problemList" :key="index" :detail="{}">
														<template v-slot:title>
															<view class="flex alcenter pt20 pb20">
																<view class="item-left">{{item.article_title}}</view>
															</view>
														</template>
														<view class="problem-content">
															<!-- #ifndef MP-ALIPAY -->
															<rich-text :nodes="$fxLink.checkescape2Html(item.article_content)" style=""></rich-text>
															<!-- #endif -->
															<!-- #ifdef MP-ALIPAY -->
															<rich-text :nodes="item.article_content" style=""></rich-text>
															<!-- #endif -->
														</view>
													</uni-collapse-item>
												</uni-collapse>
											</view>
				        </view>
			</view>

       <view class="fkwt" hover-class="itemActive" @click="openFeedBack">
           <view class="fkwt-img">
               <!-- <image src="../../static/awal6@2x.png" mode=""></image> -->
               <view class="awal text">
                   反馈问题
               </view>
<!--               <view class="text" @click="benefits('feedback')">
                   
               </view> -->
           </view>
           
       </view>
    </view>
</template>
<script>
	import * as userApi from '@/api/user'
	export default{
		data(){
			return{
				problemList:[],
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.issue()
		},
		methods:{
			issue() {
				let _this = this;
				userApi.issue({
						wxapp_id: _this.$wxapp_id,
					})
					.then(result => {
						let data = result.data;
						for (var i=0;i<data.length;i++) {
							data[i].state =false;
						}
						_this.problemList = data;
						// #ifndef MP-WEIXIN
						for(let i=0;i<_this.problemList.length;i++){
							_this.problemList[i].article_content = _this.problemList[i].article_content.replace("img",
							"img style='width=100rpx';height=100rpx")
						}
						// #endif
						// #ifdef MP-WEIXIN
						for(let i=0;i<_this.problemList.length;i++){
							_this.problemList[i].article_content = _this.problemList[i].article_content.replace("img",
							"img style=width:100px;height:100px")
						}
						// #endif
					})
					.finally(() => this.isLoading = false)
			},
			openFeedBack(){
				uni.navigateTo({
					url:"/pages/my/feedback"
				})
			},
		}
	}
</script>

<style lang="scss">
    .itemActive{
        .invitation2{
              transform:scale(1.1)
        }
    }
    .question{
        background-color: #fff;
        height: calc(100vh );
        .question-item{
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding-top: 120rpx;
            box-sizing: border-box;
            height: 488rpx;
            background: #E6F5FC;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            .hi{
                width: 260rpx;
                height: 50rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 36rpx;
                color: #333333;
                line-height: 42rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .kf{
                height: 36rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #626566;
                line-height: 30rpx;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }
   .dw{
       // position: absolute;
       // top: 240rpx;
       width: calc(100% - 50rpx);
       margin: 0 24rpx;
			 margin-top: -240rpx;
       min-height: 750rpx;
       background: #FCFDFD;
       box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
       border-radius: 0rpx 0rpx 0rpx 0rpx;
       border: 4rpx solid #FFFFFF;
       .asked{
           margin: 32rpx 0 26rpx 32rpx;
           height: 48rpx;
           font-family: PingFang SC, PingFang SC;
           font-weight: 600;
           font-size: 34rpx;
           color: #333333;
           line-height: 40rpx;
           text-align: left;
           font-style: normal;
           text-transform: none;
       }
       .asked-item{
           margin-top: 32rpx;
           display: flex;
           padding: 0 32rpx;
           justify-content: space-between;
           margin-bottom: 48rpx;

       }
   }
   .fkwt{
       // padding-top: 580rpx;
			 margin-top:80rpx;
       .fkwt-img{
           position: relative;
           display: flex;
           justify-content: center;
          .awal{
                   transition:  0.2s linear;
              position: absolute;
              width: 362rpx;
              height: 76rpx;
              background: url('/static/awal6@2x.png') no-repeat;
              background-size: 362rpx 76rpx;
          }
          .text{
               position: relative;
              width: 362rpx;
              height: 76rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 600;
              font-size: 30rpx;
              color: #FFFFFF;
              line-height: 76rpx;
              text-align: center;
              font-style: normal;
              text-transform: none;
          }
       }
   }
    }
    .txjl{
        position: fixed;
        right: 24rpx;
        top: 25rpx;
        z-index: 999;
        width: 104rpx;
        height: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 30rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    scroll-view{
        background-color: #fff;
      height: 80rpx;
      display: flex;
      align-items: center;
     	white-space: nowrap;
     	/* position: fixed; */
     }
     .content{
         // margin-top: 50rpx;
     	width: 100%;
     }
     .content .box{
     	// height: 80rpx;
     	// line-height: 70rpx;
     	display: flex;
     	justify-content: space-around;
     }
     .content .title .texts{
         position: relative;
         z-index: 2;
         width: 140rpx;
         position: relative;
     font-family: PingFang SC, PingFang SC;
     font-weight: 400;
     font-size: 30rpx;
     color: #626566;
     line-height: 60rpx;
     text-align: right;
     font-style: normal;
     text-transform: none;
     }
     .hover{
         position: absolute;
         z-index: 1;
         left: 0;
         width: 68rpx;
         height: 56rpx;
     }
      .content .title1{
          position: relative;
          z-index: 2;
          &::after{
              width: 68rpx;
              height: 66rpx;
              content: '';
              position: absolute;
              left: 0;
              top: 4rpx;
              z-index: 1;
              background-image:url('../../static/hover.png');
                 background-size: 68rpx 56rpx;
          }
      }
    .content .title1  .texts{
        
     	font-family: PingFang SC, PingFang SC;
     	font-weight: 600;
     	font-size: 30rpx;
     	color: #333333;
     	line-height: 60rpx;
     	text-align: right;
     	font-style: normal;
     	text-transform: none;
        
     }
		 .item-left{
		     height: 42rpx;
		     font-family: PingFang SC, PingFang SC;
		     font-weight: 400;
		     font-size: 30rpx;
		     color: #333333;
		     line-height: 35rpx;
		     text-align: left;
		     font-style: normal;
		     text-transform: none;
		 }
		 .item-rihgt{
		     display: flex;
		     align-items: center;
		      image{
		          width: 12rpx;
		          height: 16rpx;
		      }
		 }
</style>